<template>
  <div class="box">
    <el-card style="padding: 10px;position: relative">
      <div class="topTip" v-if="params.subjectID">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ tagsName }}</el-breadcrumb-item>
            <el-breadcrumb-item>标签管理</el-breadcrumb-item>
          </el-breadcrumb>
          <hr>
    </div>
      <div class="header">
        <el-form inline>
          <el-form-item label="标签名称">
            <el-input v-model="formData.tagName"></el-input>
          </el-form-item>
          <el-form-item label="状态" style="margin: 0 30px">
            <el-select v-model="formData.state" placeholder="请输入">
              <el-option
                v-for="item in status"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="medium" @click="clearButton">清除</el-button>
            <el-button size="medium" type="primary" @click="saveOk"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
        <div class="right">
          <span class="el-icon-back" v-if="params.subjectID" @click="$router.push('/subjects/list')"> 返回学科 </span>
          <el-button size="small" type="success" icon="el-icon-edit"
            @click="tagAdd">新增标签</el-button
          >
        </div>
      </div>
      <el-alert
        style="font-size: 12px; margin-bottom: 10px"
        type="info"
        show-icon
        title=""
        :closable="false"
      >
        数据一共 {{ counts }} 条
      </el-alert>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" align="center">
        </el-table-column>
        <el-table-column prop="tagName" label="标签名称" align="center">
        </el-table-column>
        <el-table-column prop="username" label="创建者" align="center">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button size="medium" type="text" v-if="row.state==='已启用'" @click="disUse(row)">禁用</el-button>
            <el-button size="medium" type="text" v-if="row.state==='已禁用'" @click="useHa(row)">启用</el-button>
            <el-button size="medium" type="text" :disabled="row.state==='已启用'" @click="edit(row)">修改</el-button>
            <el-button size="medium" type="text" :disabled="row.state==='已启用'" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="text-align:right; margin-top = 30px;">
        <el-pagination
        style="margin-top: 25px"
          v-if="params.pagesize < 50"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="params.pagesize"
          layout=" prev, pager, next, sizes, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新建标签 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
      <el-form ref="formDialog" :model="addTag" :rules="rules" label-width="80px">
        <el-form-item label="所属学科" prop="subjectID">
          <el-select v-model="addTag.subjectID">
            <el-option v-for="item in addList" :key="item.label+item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="addTag.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import all from '@/api/base/baseApi.js'
import { parseTimeByString } from '@/filters/index'
import { list, add, update, remove, changeState } from '@/api/hmmm/tags.js'
export default {
  data () {
    return {
      counts: 2,
      formData: {
        tagName: '',
        state: null
      },
      status: [],
      tableData: [],
      params: {
        page: 1,
        pagesize: 10,
        subjectID: null
      },
      rules: {
        subjectID: [{ required: true, message: '请选择活动区域', trigger: 'blur' }],
        tagName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      },
      dialogVisible: false,
      // 新建标签-表单
      addTag: {
        subjectID: null,
        tagName: ''
      },
      title: '',
      addList: [], // 新建-所属学科
      use: false,
      tagsName: ''
    }
  },
  created () {
    // 可以判断路由参数是否为空对象
    if (Object.keys(this.$route.query).length === 0) {
      console.log('路由参数为空对象')
    } else {
      console.log(this.$route.query)
      const { subjectID, subjectName } = this.$route.query
      // this.subjectID = subjectID
      this.params.subjectID = subjectID
      this.tagsName = subjectName
    }
    this.getTableDate()
    this.status = all.status
  },
  beforeRouteUpdate (to, form, next) {
    // }
    next()
    this.params.subjectID = null
    this.subjectName = ''
    this.getTableDate()
  },
  methods: {
    async getTableDate () {
      const { data } = await list(this.params)
      this.counts = data.counts
      data.items.forEach((item) => {
        item.state = item.state === 0 ? '已禁用' : '已启用'
        item.addDate = parseTimeByString(item.addDate)
      })
      this.tableData = data.items
    },
    // 禁用
    async disUse (row) {
      await changeState({ id: row.id, state: 0 })
      row.state = '已禁用'
      this.use = true
    },
    // 启用
    async useHa (row) {
      await changeState({ id: row.id, state: 1 })
      row.state = '已启用'
      this.use = false
    },
    // 清除
    clearButton () {
      this.formData = {}
      this.getTableDate()
    },
    // 搜索-确定
    async saveOk () {
      const { data } = await list({ ...this.formData, ...this.params })
      this.counts = data.counts
      this.tableData = data.items
    },
    // 分页
    handleCurrentChange (current) {
      this.params.page = current
      this.getTableDate()
    },
    handleSizeChange (pagesize) {
      this.params.pagesize = pagesize
      this.getTableDate()
    },
    // 新建按钮
    async tagAdd () {
      const { data } = await simple()
      this.addList = data
      this.addTag = {
        subjectID: null,
        tagName: ''
      }
      this.title = '新建目录'
      this.dialogVisible = true
    },
    // 新建标签-确定
    async onConfirm () {
      try {
        this.$refs.formDialog.validate()
        if (this.title === '新建目录') {
          await add(this.addTag)
        } else {
          await update(this.addTag)
        }
        this.getTableDate()
        this.dialogVisible = false
      } catch (error) {
        console.log(error)
      }
    },
    // 修改
    edit (row) {
      this.title = '修改目录'
      this.addTag.subjectID = row.subjectID
      this.addTag.tagName = row.tagName
      this.addTag.id = row.id
      this.dialogVisible = true
    },
    // 关闭弹窗
    // handleClose () {
    //   this.dialogVisible = false
    //   this.$refs.formDialog.resetFields()
    //   console.log(1)
    // }
    // 删除
    async del (row) {
      try {
        await this.$confirm('此操作将永久删除该标签,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        this.getTableDate()
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.box {
  padding: 15px;
}
.header {
  display: flex;
  justify-content: space-between;
  position: relative;

  .right {
    span {
      position: absolute;
      right: 121px;
      top: 10px;
      color: #409eff;
      cursor: pointer;
    }
  }
}

::v-deep .el-table__header {
  padding: 10px 0;
  font-size: 16px;
  th {
    background-color: #fafafa;
  }
}

hr{
  border: none;
  width: 100%;
  height: 1px;
  background-color:#ebeef5;
  position: absolute;
  left: 0;
  top: 50px;
}

.topTip {
    width: 100%;
    height: 57px;
  }
</style>
